<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="t">
      <h1>{{info.name}}</h1>
      <button @click="changeName">修改名字</button>
      <button @click="changeInfo">修改对象</button>
    </template>

    <script src="./vue.js"></script>
    <script>
      Vue.createApp({
        template: '#t',
        data() {
          return {
            info: {
              name: 'slim',
              age: 20
            }
          }
        },
        methods: {
          changeName() {
            this.info.name = 'nolan'
          },
          changeInfo() {
            this.info = { name: 'slim' }
          }
        },
        watch: {
          // info: function (oldValue, newValue) {
          //   console.log('oldValue', oldValue, 'newValue', newValue)
          // },
          info: {
            handler: function (oldValue, newValue) {
              console.log('oldValue', oldValue, 'newValue', newValue)
            },
            deep: true
            // immediate: true
          }
        },
        created() {
          const unwatch = this.$watch(
            'info',
            (oldValue, newValue) => {
              console.log('oldValue', oldValue, 'newValue', newValue)
            },
            {
              deep: true,
              // immediate: true
            }
          )
          unwatch() // 取消监听
        }
      }).mount('#app')
    </script>
  </body>
</html>
